<template>
  <div class="dashboard">
    <!-- 顶部导航 -->
    <header class="header">
      <div class="time">{{ currentTime }}</div>
      <div class="title">低空安全管理平台</div>
      <div class="user">zgdx</div>
    </header>

    <!-- 地图容器 -->
    <div id="mapContainer" class="map"></div>

    <!-- 顶部统计栏 -->
    <div class="stats">
      <div class="stat-item">探测次数 {{ stats.detect }}</div>
      <div class="stat-item">预警次数 {{ stats.warn }}</div>
      <div class="stat-item">入侵次数 {{ stats.invasion }}</div>
    </div>

    <!-- 左侧功能按钮 -->
    <div class="sidebar">
      <button @click="showDrone">无人机</button>
      <button @click="showRadar">雷达</button>
    </div>

    <!-- 右侧实时无人机 -->
    <div class="right-panel">
      实时无人机 x {{ drones.length }}
    </div>

    <!-- 底部信息 -->
    <footer class="footer">
      延迟: {{ latency }} ms | 版本: {{ version }}
    </footer>
  </div>
</template>

<script>

export default {
  name: "Dashboard",
  data() {
    return {
      currentTime: "", // 当前时间
      map: null,        // 保存地图实例
      stats: {detect: 1777, warn: 0, invasion: 0},
      drones: [],
      latency: 28,
      version: "3.2.214.2.17.136.14"
    };
  },
  mounted() {
    // 1. 启动时钟
    setInterval(() => {
      const now = new Date();
      this.currentTime = now.toLocaleString();
    }, 1000);

    // 2. 加载高德地图
    this.loadAMap(() => {
      this.map = new window.AMap.Map("mapContainer", {
        zoom: 12,
        center: [119.4129, 32.3942], // 扬州
        mapStyle: "amap://styles/darkblue"
      });

      // 添加一个标记
      new window.AMap.Marker({
        position: [119.413, 32.393],
        map: this.map,
        title: "扬州机场"
      });
    });
  },
  methods: {
    // 地图加载方法
    loadAMap(callback) {
      if (window.AMap) {
        callback();
      } else {
        const script = document.createElement("script");
        script.type = "text/javascript";
        script.src =
          "https://webapi.amap.com/maps?v=2.0&key=901ed8862f0fa781e221d8c6af74e0eb";
        script.onload = callback;
        document.head.appendChild(script);
      }
    },

    // 点击按钮：显示无人机
    showDrone() {
      console.log("点击无人机");
      // 这里可以在地图上添加无人机的 marker
    },

    // 点击按钮：显示雷达
    showRadar() {
      console.log("点击雷达");
      // 这里可以在地图上添加雷达的 marker 或图层
    }
  }
};

</script>

<style scoped>
.dashboard {
  width: 100%;
  height: 100vh;
  overflow: hidden;
  background: #000;
}

.map {
  width: 100%;
  height: 100%;
}

.header {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 50px;
  display: flex;
  justify-content: space-between;
  padding: 0 20px;
  background: rgba(0, 0, 0, 0.6);
  color: #fff;
}

.stats {
  position: absolute;
  top: 60px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 20px;
}

.stat-item {
  background: rgba(0, 0, 0, 0.5);
  padding: 10px;
  color: #00ffff;
  border-radius: 5px;
}

.sidebar {
  position: absolute;
  top: 150px;
  left: 20px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.right-panel {
  position: absolute;
  top: 100px;
  right: 20px;
  background: rgba(0, 0, 0, 0.5);
  padding: 10px;
  color: #fff;
}

.footer {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 30px;
  background: rgba(0, 0, 0, 0.6);
  color: #0f0;
  font-size: 12px;
  display: flex;
  align-items: center;
  padding-left: 20px;
}
</style>
